<template>
  <div class="home-page">
    <!-- 头部菜单 -->
    <el-menu
      class="head-menu"
      :default-active="activeIndex"
      background-color="#215077"
      mode="horizontal"
      :ellipsis="false"
    >
      <div class="head-box">
        <img class="logo" src="/src/assets/top-head/LOGO.png" />
        <div class="head-title">运营商管理平台</div>
        <div class="head-seach">
          <el-input
            @input="toseach"
            v-model="seach"
            style="width: 200px"
            placeholder="搜索菜单/功能模块"
            :prefix-icon="Search"
          />
        </div>
        <div class="account">
          <img src="../../assets/home/user1.png" alt="" />
          <span>13306236880</span>
        </div>
      </div>
    </el-menu>

    <!-- 菜单 -->
    <div class="menu-content">
      <!-- 左侧菜单 -->
      <el-menu
        class="left-menu"
        active-text-color="#F0A93E"
        mode="vertical"
        background-color="#113B5A"
        :default-active="activeIndex"
        text-color="#fff"
      >
        <el-scrollbar wrap-style="height: 100%">
          <el-menu-item
            v-for="item in menuData"
            :key="item.index"
            :index="item.index"
            @click="handleMenuClick(item)"
          >
            <div>
              <img
                :src="
                  activeIndex === item.index ? item.imgsrcselect : item.imgsrc
                "
              />
            </div>
            <div>{{ item.title }}</div>
          </el-menu-item>
        </el-scrollbar>
      </el-menu>

      <!-- 右侧二级菜单 -->
      <el-menu
        class="right-menu"
        :default-active="activeSubMenuSubIndex"
        :default-openeds="defaultOpeneds"
        text-color="#fff"
        background-color="#215077"
        mode="vertical"
        @open="handleOpen"
        @close="handleClose"
      >
        <template v-for="item in currentSubMenuItems" :key="item.index">
          <el-sub-menu
            v-if="item.subMenuItemsList.length > 0"
            :index="item.index"
          >
            <template #title>
              <span>{{ item.title }}</span>
            </template>
            <el-menu-item
              v-for="i in item.subMenuItemsList"
              @click="handleSubMenuSubClick(i)"
              :key="i.index"
              title=""
              :index="i.index"
              :class="{
                'active-menu-Sub-item': activeSubMenuSubIndex === i.index,
              }"
              >{{ i.title }}</el-menu-item
            >
          </el-sub-menu>
          <el-menu-item
            v-else
            :index="item.index"
            @click="handleMenuItemClick(item)"
            :class="{ 'active-menu-item': activeSubMenuIndex === item.index }"
          >
            {{ item.title }}
          </el-menu-item>
        </template>
      </el-menu>
      <!-- 面包屑导航 -->
      <div class="content">
        <el-scrollbar height="100%">
          <router-view />
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { Search } from "@element-plus/icons-vue";

interface MenuList {
  index: string;
  title: string;
  imgsrc: string;
  link: string;
  imgsrcselect: string;
  MenuItemsList: {
    index: string;
    title: string;
    link: string;
    subMenuItemsList: { index: string; title: string; link: string }[];
  }[];
}

const activeIndex = ref(""); // 左侧菜单默认激活的一级菜单项
const activeSubMenuIndex = ref(""); // 右侧菜单默认激活的二级菜单项
const activeSubMenuSubIndex = ref(""); // 右侧菜单激活的三级菜单项
const defaultOpeneds = ref<string[]>([""]); // 默认展开第一个子菜单
const router = useRouter();
const seach = ref("");

const menuData = ref<MenuList[]>([
  {
    index: "1",
    title: "常用工具",
    imgsrc: "/src/assets/home/home1.png",
    imgsrcselect: "/src/assets/home/home2.png",
    link: "/",
    MenuItemsList: [
      { index: "1-1", title: "数据概况", link: "/", subMenuItemsList: [] },
    ],
  },
  {
    index: "2",
    title: "设备管理",
    imgsrc: "/src/assets/home/equipment1.png",
    imgsrcselect: "/src/assets/home/equipment2.png",
    link: "/list",
    MenuItemsList: [
      { index: "2-1", title: "设备列表", link: "/list", subMenuItemsList: [] },
      {
        index: "2-2",
        title: "配置信息",
        link: "/configure",
        subMenuItemsList: [],
      },
      { index: "2-3", title: "缺货清单", link: "/stock", subMenuItemsList: [] },
      {
        index: "2-4",
        title: "补货模版",
        link: "/replenish",
        subMenuItemsList: [],
      },
      {
        index: "2-5",
        title: "补货记录",
        link: "/record",
        subMenuItemsList: [],
      },
      {
        index: "2-6",
        title: "路线分组",
        link: "/circuit",
        subMenuItemsList: [],
      },
    ],
  },
  {
    index: "3",
    title: "商品管理",
    imgsrc: "/src/assets/home/commodity1.png",
    imgsrcselect: "/src/assets/home/commodity2.png",
    link: "/sale",
    MenuItemsList: [
      { index: "3-1", title: "在售商品", link: "/sale", subMenuItemsList: [] },
      {
        index: "3-2",
        title: "公共商品库",
        link: "/public",
        subMenuItemsList: [],
      },
      { index: "3-3", title: "批次列表", link: "/batch", subMenuItemsList: [] },
    ],
  },
  {
    index: "4",
    title: "订单管理",
    imgsrc: "/src/assets/home/order1.png",
    imgsrcselect: "/src/assets/home/order2.png",
    link: "/order_list",
    MenuItemsList: [
      {
        index: "4-1",
        title: "订单列表",
        link: "/order_list",
        subMenuItemsList: [],
      },
      {
        index: "4-2",
        title: "退款订单列表",
        link: "/refund",
        subMenuItemsList: [],
      },
      {
        index: "4-3",
        title: "异常订单",
        link: "/abnormal",
        subMenuItemsList: [],
      },
      {
        index: "4-4",
        title: "短信催收",
        link: "/message",
        subMenuItemsList: [],
      },
      {
        index: "4-5",
        title: "购物黑名单",
        link: "/blacklist",
        subMenuItemsList: [],
      },
      {
        index: "4-6",
        title: "微信商户投诉",
        link: "/complaint",
        subMenuItemsList: [],
      },
    ],
  },
  {
    index: "5",
    title: "策略管理",
    imgsrc: "/src/assets/home/strategy1.png",
    imgsrcselect: "/src/assets/home/strategy2.png",
    link: "/price_strategy",
    MenuItemsList: [
      {
        index: "5-1",
        title: "价格策略管理",
        link: "/price_strategy",
        subMenuItemsList: [],
      },
      {
        index: "5-2",
        title: "报警策略管理",
        link: "/warning_strategy",
        subMenuItemsList: [],
      },
      { index: "5-3", title: "场地管理", link: "/field", subMenuItemsList: [] },
    ],
  },
  {
    index: "6",
    title: "报警监控",
    imgsrc: "/src/assets/home/police1.png",
    imgsrcselect: "/src/assets/home/police2.png",
    link: "/alarm-monitoring",
    MenuItemsList: [
      {
        index: "6-1",
        title: "报警信息",
        link: "/alarm-monitoring",
        subMenuItemsList: [],
      },
    ],
  },
  {
    index: "7",
    title: "广告管理",
    imgsrc: "/src/assets/home/ad-manage1.png",
    imgsrcselect: "/src/assets/home/ad-manage2.png",
    link: "/advertising_manage",
    MenuItemsList: [
      {
        index: "7-1",
        title: "广告列表",
        link: "/advertising_manage",
        subMenuItemsList: [],
      },
      {
        index: "7-2",
        title: "投放策略列表",
        link: "/advertising_strategy",
        subMenuItemsList: [],
      },
    ],
  },
  {
    index: "8",
    title: "广告收益",
    imgsrc: "/src/assets/home/ad-profit1.png",
    imgsrcselect: "/src/assets/home/ad-profit2.png",
    link: "/advertising_revenue",
    MenuItemsList: [
      {
        index: "8-1",
        title: "广告收益统计",
        link: "/advertising_revenue",
        subMenuItemsList: [],
      },
    ],
  },
  {
    index: "9",
    title: "运营监控",
    imgsrc: "/src/assets/home/monitor1.png",
    imgsrcselect: "/src/assets/home/monitor2.png",
    link: "/monitor",
    MenuItemsList: [
      {
        index: "9-1",
        title: "监控中心",
        link: "/monitor",
        subMenuItemsList: [],
      },
    ],
  },
  {
    index: "10",
    title: "数据中心",
    imgsrc: "/src/assets/home/data1.png",
    imgsrcselect: "/src/assets/home/data2.png",
    link: "/sales_statistics",
    MenuItemsList: [
      //含3级3个
      {
        index: "10-1",
        title: "财务分析",
        link: "/sales_statistics",
        subMenuItemsList: [
          { index: "10-1-1", title: "销售统计", link: "/sales_statistics" },
          { index: "10-1-2", title: "设备盈利分析", link: "/profit_analysis" },
          {
            index: "10-1-3",
            title: "单台数据分析",
            link: "/single_data_analysis",
          },
        ],
      },
      //含3级2个
      {
        index: "10-2",
        title: "商品分析",
        link: "/product-analysis",
        subMenuItemsList: [
          { index: "10-2-1", title: "商品优化分析", link: "/product-analysis" },
          { index: "10-2-2", title: "商品销售排行", link: "/product-ranking" },
        ],
      },
    ],
  },
  {
    index: "11",
    title: "财务中心",
    imgsrc: "/src/assets/home/finance1.png",
    imgsrcselect: "/src/assets/home/finance2.png",
    link: "/information",
    MenuItemsList: [
      //含3级4个
      {
        index: "11-1",
        title: "结算中心",
        link: "/information",
        subMenuItemsList: [
          { index: "11-1-1", title: "提现资料", link: "/information" },
          { index: "11-1-2", title: "微信支付代收", link: "/wechat_payment" },
          { index: "11-1-3", title: "支付宝支付代收", link: "/alipay-payment" },
          { index: "11-1-4", title: "品牌结算", link: "/settlement" },
        ],
      },
      //含3级6个
      {
        index: "11-2",
        title: "费用中心",
        link: "/cost",
        subMenuItemsList: [
          { index: "11-2-1", title: "账户概览", link: "/cost" },
          { index: "11-2-2", title: "充值订单", link: "/order" },
          { index: "11-2-3", title: "交易明细", link: "/transaction" },
          { index: "11-2-4", title: "发票申请", link: "/invoice" },
          { index: "11-2-5", title: "设备识别费", link: "/equip-identity-fee" },
          { index: "11-2-6", title: "卡续费", link: "/card-renew" },
        ],
      },
      //含3级2个
      {
        index: "11-3",
        title: "提成分配",
        link: "/commisssion",
        subMenuItemsList: [
          { index: "11-3-1", title: "人员提成统计", link: "/commisssion" },
          { index: "11-3-2", title: "卡位提成统计", link: "/card-commission" },
        ],
      },
    ],
  },
  {
    index: "12",
    title: "系统管理",
    imgsrc: "/src/assets/home/set1.png",
    imgsrcselect: "/src/assets/home/set2.png",
    link: "/qualification",
    MenuItemsList: [
      {
        index: "12-1",
        title: "运营资质",
        link: "/qualification",
        subMenuItemsList: [],
      },
      {
        index: "12-2",
        title: "支付配置",
        link: "/payConfig",
        subMenuItemsList: [],
      },
      {
        index: "12-3",
        title: "系统配置",
        link: "/system-config",
        subMenuItemsList: [],
      },
      {
        index: "12-4",
        title: "角色列表",
        link: "/role-list",
        subMenuItemsList: [],
      },
      {
        index: "12-5",
        title: "角色权限模版",
        link: "/role-permission",
        subMenuItemsList: [],
      },
      {
        index: "12-6",
        title: "支付宝白名单",
        link: "/white-list",
        subMenuItemsList: [],
      },
      { index: "12-7", title: "操作日志", link: "/log", subMenuItemsList: [] },
    ],
  },
  {
    index: "13",
    title: "提费卡管理",
    imgsrc: "/src/assets/home/goods1.png",
    imgsrcselect: "/src/assets/home/goods2.png",
    link: "",
    MenuItemsList: [
      {
        index: "13-1",
        title: "设备列表",
        link: "/equipment-list",
        subMenuItemsList: [],
      },
      {
        index: "13-2",
        title: "商品列表",
        link: "/product-list",
        subMenuItemsList: [],
      },
      {
        index: "13-3",
        title: "提货卡列表",
        link: "/pickup-cards-list",
        subMenuItemsList: [],
      },
      {
        index: "13-4",
        title: "数据统计",
        link: "/data-statistics",
        subMenuItemsList: [],
      },
    ],
  },
  {
    index: "14",
    title: "用户管理",
    imgsrc: "/src/assets/home/user1.png",
    imgsrcselect: "/src/assets/home/user2.png",
    link: "/data",
    MenuItemsList: [
      { index: "14-1", title: "数据概览", link: "/data", subMenuItemsList: [] },
      {
        index: "14-2",
        title: "用户列表",
        link: "/user-list",
        subMenuItemsList: [],
      },
      {
        index: "14-3",
        title: "角色权限模版",
        link: "/user-permission",
        subMenuItemsList: [],
      },
    ],
  },
]);

const currentSubMenuItems = ref<MenuList["MenuItemsList"]>([]); // 当前选中的一级菜单对应的二级菜单项

const handleMenuClick = (menuItem: MenuList) => {
  activeIndex.value = menuItem.index; // 更新左侧菜单激活的一级菜单项
  if (
    menuItem.MenuItemsList.length > 0 &&
    menuItem.MenuItemsList[0].subMenuItemsList.length > 0
  ) {
    // 三级
    defaultOpeneds.value = [
      menuItem.MenuItemsList[0].subMenuItemsList[0].index,
    ]; // 如果有子菜单，则展开第一个子菜单
    currentSubMenuItems.value = menuItem.MenuItemsList; // 更新右侧菜单显示的二级菜单项
    activeSubMenuSubIndex.value =
      menuItem.MenuItemsList[0].subMenuItemsList[0].index; // 更新右侧菜单激活的三级菜单项
    router.push(menuItem.link);
  } else {
    // 二级
    currentSubMenuItems.value = menuItem.MenuItemsList; // 更新右侧菜单显示的二级菜单项
    activeSubMenuIndex.value = menuItem.MenuItemsList[0].index; // 如果没有子菜单，则设置默认激活的二级菜单项为第一个
    router.push(menuItem.link); // 跳转到一级菜单项关联的链接
  }
};

const handleMenuItemClick = (subMenuItem: {
  index: string;
  title: string;
  link: string;
}) => {
  activeSubMenuIndex.value = subMenuItem.index; // 更新右侧菜单激活的二级菜单项
  router.push(subMenuItem.link);
};

const handleSubMenuSubClick = (subMenuItem: {
  index: string;
  title: string;
  link: string;
}) => {
  activeSubMenuSubIndex.value = subMenuItem.index; // 更新右侧菜单激活的三级菜单项
  router.push(subMenuItem.link);
};

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};

const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const toseach = () => {
  menuData.value.map((item) => {
    if (seach.value == item.title) {
      activeIndex.value = item.index;
      currentSubMenuItems.value = item.MenuItemsList;
      activeSubMenuIndex.value = item.MenuItemsList[0].index;
      router.push(item.link);
    } else {
      item.MenuItemsList.map((i) => {
        if (seach.value == i.title) {
          currentSubMenuItems.value = item.MenuItemsList;
          activeIndex.value = item.index;
          activeSubMenuIndex.value = i.index;
          router.push(i.link);
        } else {
          if (i.subMenuItemsList.length > 0) {
            i.subMenuItemsList.map((towi) => {
              if (seach.value == towi.title) {
                currentSubMenuItems.value = item.MenuItemsList;
                activeIndex.value = item.index;
                activeSubMenuIndex.value = i.index;
                activeSubMenuSubIndex.value = towi.index;
                router.push(towi.link);
              }
            });
          }
        }
      });
    }
  });
};
window.addEventListener("beforeunload", function () {
  localStorage.setItem("activeIndex", activeIndex.value);
  localStorage.setItem("activeSubMenuIndex", activeSubMenuIndex.value);
  localStorage.setItem("activeSubMenuSubIndex", activeSubMenuSubIndex.value);
  localStorage.setItem(
    "currentSubMenuItems",
    JSON.stringify(currentSubMenuItems.value)
  );
});
onMounted(() => {
  const activeIndex1 = localStorage.getItem("activeIndex");
  if (activeIndex1) {
    activeIndex.value = activeIndex1;
    const activeIndex2 = localStorage.getItem("activeSubMenuIndex");
    if (activeIndex2) {
      activeSubMenuIndex.value = activeIndex2;
      const activeIndex3 = localStorage.getItem("activeSubMenuSubIndex");
      if (activeIndex3) {
        activeSubMenuSubIndex.value = activeIndex3;
      }
    }
  }
  const storedSubMenuItems = localStorage.getItem("currentSubMenuItems");
  if (storedSubMenuItems) {
    currentSubMenuItems.value = JSON.parse(storedSubMenuItems);
  } else {
    // 页面加载时，默认显示第一个一级菜单对应的二级菜单
    activeIndex.value = "1";
    currentSubMenuItems.value = menuData.value[0].MenuItemsList;
    activeSubMenuIndex.value = menuData.value[0].MenuItemsList[0].index;
  }
});
</script>

<style scoped lang="scss">
.home-page {
  height: 100vh;
  overflow: hidden;

  .head-menu {
    border-bottom: none;

    .head-box {
      display: flex;
      align-items: center;
      padding: 0 20px;
      color: #fff;

      .logo {
        width: 100px;
      }

      .head-title {
        font-size: 16px;
        margin-left: 20px;
      }

      .head-seach {
        margin: 0 30px;
      }

      .account {
        display: flex;
        align-items: center;

        img {
          width: 30px;
          height: 35px;
          margin-right: 10px;
        }
      }
    }
  }

  .menu-content {
    width: 100%;
    display: flex;
    height: calc(100vh - 60px); // 60px 是头部菜单的高度，可以根据实际情况调整

    .left-menu {
      border-right: none;
      width: 100px;
      .el-menu-item {
        height: 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: 10px; // 调整上下间距
        align-items: center; // 水平居中
        text-align: center;
        line-height: normal;
        font-size: 12px;

        img {
          width: 26px; // 调整图片大小
          margin-bottom: 5px; // 调整图片与文字间距
        }
      }
    }

    .right-menu {
      width: 144px;
      .el-menu-item {
        height: 50px;
        color: #fff;
      }

      .active-menu-item {
        height: 50px;
        background-color: #f0a93e; // 设置选中项的背景色
      }

      .active-menu-Sub-item {
        height: 50px;
        background-color: #f0a93e; // 设置选中项的背景色
      }
    }

    .el-breadcrumb {
      margin-bottom: 10px; // 调整面包屑导航与菜单之间的间距
    }

    .content {
      width: calc(100vw - 244px);
    }
  }
}
</style>
